<template>
    <div>
      测试axios实例
      <img :src="avatar" alt="">
    </div>
</template>

<script>
  import axios from "axios"
  export default {
    name: 'HelloWorld',
    data(){
      return{
        avatar:""
      }
    },
    async mounted(){
      /*因为使用axios发送请求 最终返回的数据是具有特定的格式:
      我们希望最终只返回data.这可以借助拦截器实现
      {
        data: {},
        status: 200,
        statusText: 'OK',
        headers: {},
        config: {},
        request: {}
      }*/

      /*

            请求拦截器给了我们最后一次修改config的机会
            响应拦截器可以帮我们优化response的结构
            响应拦截器也可以帮我们做一些公共的错误处理逻辑
      */

      // 添加请求拦截器
      axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        // config 在发送请求前的一刹那 config的具体配置
        console.log(config,"config");
        config.params.name="xxx";
        return config;
      });

      // 添加响应拦截器
      axios.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        // response 从服务器那边拿到的响应数据
        // 真正返回给浏览器的数据 得看return的值
        console.log(response,"response");
        return response.data;
      }, function (error) {
        // 对响应错误做点什么
        console.log(error,"error");
        return Promise.reject(error);
      });


      //全局配置
      axios.defaults.baseURL = 'https://api2.github.com/';
      const body = await axios.get("/search/users",{
        params:{
          q:"damu"
        }
      })
      console.log(body);
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
